<template>
  <div class="red">
    <el-table :data="data">
      <el-table-column prop="id" label="红包id" />
      <el-table-column prop="member" label="所属用户">
        <template slot-scope="scope">
          <img style="width: 40px;height: 40px;" :src="scope.row.owner_header">
          <p style="margin: 0;padding:0;font-size: 12px;">{{scope.row.owner_nickname}}</p>
        </template>
      </el-table-column>
      <el-table-column prop="type" label="红包类型">
        <template slot-scope="scope">
          {{ typeToString(scope.row) }}
        </template>
      </el-table-column>
      <el-table-column prop="title" label="红包标题" />
      <el-table-column prop="area" label="红包地区">
        <template slot-scope="scope">
          <template v-if="scope.row.area">
            {{ scope.row.area }}
          </template>
          <template v-else>
            不限制
          </template>
        </template>
      </el-table-column>
      <el-table-column prop="money" label="红包金额" />
      <el-table-column prop="number" label="红包数量">
        <template slot-scope="scope">
          已发{{scope.row.numbered}} / 总数{{scope.row.number}}
        </template>
      </el-table-column>
      <el-table-column prop="status" label="红包状态">
        <template slot-scope="scope">
          <template v-if="scope.row.status === 2">
            正常
          </template>
          <template v-else>停止</template>
        </template>
      </el-table-column>
      <el-table-column prop="handle" label="操作">
        <template slot-scope="scope">
          <el-button type="danger" size="mini" @click="remove(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--S分页-->
    <div id="pagination">
      <el-pagination
        layout="prev, pager, next"
        :page-size="page_size"
        :total="total"
        @current-change="changePage"
      />
    </div>
    <!--E分页-->
  </div>
</template>

<script>
export default {
  name: 'Red',
  data() {
    return {
      // 红包总数
      total: 0,
      page_size: 10,
      page: 1,
      data: []
    }
  },
  mounted() {
    this.getTotal()
    this.getList()
  },
  methods: {
    // 获取红包总数
    getTotal() {
      this.$get('red/total')
        .then((res) => {
          this.total = res.data.data
        })
    },
    // 获取红包列表
    getList() {
      this.$get('red', {
        limit: [(this.page - 1) * this.page_size, this.page_size]
      })
        .then((res) => {
          this.data = res.data.data
        })
    },
    // 切换页面
    changePage(page) {
      this.page = page
      this.getList()
    },
    // 红包类型转字符串
    typeToString(params) {
      const { type, red_type } = params
      let str_type = ''
      let str_red_type = ''
      if (type === 1) {
        str_type = '普通红包'
      } else {
        str_type = '手气红包'
      }
      if (red_type === 'default') {
        str_red_type = '默认红包'
      } else if (red_type === 'image') {
        str_red_type = '图片红包'
      } else {
        str_red_type = '视频红包'
      }
      return str_red_type + ' / ' + str_type
    },
    // 删除红包
    remove(params) {
      this.$confirm('红包内剩余余额将退回给用户，确认删除？', '提示', {
        confirmButtonText: '确定删除',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.$del('red/' + params.id)
            .then(() => {
              this.$message.success('删除成功')
              this.getTotal()
              this.getList()
            })
            .catch(() => {
              this.$message.error('删除失败')
            })
        })
        .catch(() => {
          console.log('取消')
        })
    }
  }
}
</script>

<style scoped lang="scss">
  #pagination{
    text-align: center;
  }
</style>
